<script setup>
import { ref, onMounted } from 'vue'
import { getPoleList, deleteRole } from '@/api/rodManage'
import manageModal from './components/manage-modal.vue'
import { Modal, message } from 'ant-design-vue'
const form = ref({
  page: '1',
  pageSize: '10',
  poleName: '',
  poleNumber: '',
  poleStatus: null
})
const list = ref([])
const total = ref(null)
const getPoleListApi = async () => {
  const { data } = await getPoleList(form.value)
  //  console.log(data);
  list.value = data.rows
  total.value = data.total
}
const columns = [
  { title: '序号', dataIndex: 'num' },
  { title: '一体杆名称', dataIndex: 'poleName', key: 'poleName' },
  { title: '一体杆编号', dataIndex: 'poleNumber', key: 'poleNumber' },
  { title: '一体杆IP', dataIndex: 'poleIp', key: 'poleIp' },
  { title: '安装区域', dataIndex: 'areaName', key: 'areaName' },
  { title: '一体杆类型', dataIndex: 'poleType', key: 'poleType' },
  { title: '运行状态', dataIndex: 'poleStatus', key: 'poleStatus' },
  { title: '操作', dataIndex: 'edit' }
]
//挂载调用
onMounted(() => {
  getPoleListApi()
})
//页码
const onChange = (page, pageSize) => {
  form.value.page = page
  form.value.pageSize = pageSize
  getPoleListApi()
}
//弹框
const showModal = ref(false)
//通知父组件更新
const addPole = () => {
  getPoleListApi()
}
//编辑
const editModal = ref(null)
const btnEdit = async (record) => {
  await editModal.value.getPoleDetailsApi(record)
  showModal.value = true
}
//删除
const btnDel = async (id) => {
  Modal.confirm({
    content: '是否确定删除当前选中的一体杆',
    async onOk() {
      await deleteRole(id)
      message.success('删除成功')
      getPoleListApi()
    }
  })
}
//查询
const btnSearch = () => {
  form.value.page = 1
  getPoleListApi()
}
//全选
const rowSelectionKeys=ref('')
const rowSelection={
  onChange:(value)=>{
    console.log(value);
    rowSelectionKeys.value=value
    console.log(rowSelectionKeys.value);
  }
}
//批量删除
const delRoleAll=()=>{
  if(!rowSelectionKeys.value){
    message.info('请选择你要删除的一体杆')
  }else{
    Modal.confirm({
    content: '是否确定删除当前选中的一体杆',
    async onOk() {
      await deleteRole(rowSelectionKeys.value)
      message.success('删除成功')
      getPoleListApi()
    }
  })
  }
}
</script>
<template>
  <div class="container">
    <div class="container_app">
      <a-form>
        <a-row>
          <a-col :span="6">
            <a-form-item label="一体杆名称：">
              <a-input
                placeholder="请输入一体杆名称"
                style="width: 220px"
                v-model:value="form.poleName"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="一体杆编号：">
              <a-input
                placeholder="请输入一体杆编号"
                style="width: 220px"
                v-model:value="form.poleNumber"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="运行状态：">
              <a-select
                placeholder="请输入运行状态"
                style="width: 220px"
                v-model:value="form.poleStatus"
              >
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="0">正常</a-select-option>
                <a-select-option value="1">异常</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col>
            <a-button type="primary" style="border-radius: 5px" @click="btnSearch">查询</a-button>
          </a-col>
        </a-row>
        <a-divider style="margin-top: 0" />
      </a-form>
      <a-row>
        <a-col>
          <a-button type="primary" style="margin-right: 10px" @click="showModal = true"
            >添加一体杆</a-button
          >
        </a-col>
        <a-col>
          <a-button @click="delRoleAll">批量删除</a-button>
        </a-col>
      </a-row>
      <a-table
        :row-selection="rowSelection"
        style="margin-top: 10px"
        :dataSource="list"
        :columns="columns"
        size="small"
        :pagination="false"
        rowKey="id"
        checkStrictly
      >
        <template #bodyCell="{ text, record, column, index }">
          <template v-if="column.dataIndex === 'num'">
            {{ (form.page - 1) * form.pageSize + index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'edit'">
            <a-space>
              <a-button type="text" style="color: blue" @click="btnEdit(record)">编辑</a-button>
            </a-space>
            <a-button type="text" style="color: blue" @click="btnDel(record.id)">删除</a-button>
          </template>
          <template v-if="column.dataIndex === 'poleType'">
            <span v-if="text === 'entrance'">入口</span>
            <span v-else-if="text === 'export'">出口</span>
            <span v-else>center</span>
          </template>
          <template v-if="column.dataIndex === 'poleStatus'">
            <span v-if="text === 0">正常</span>
            <span v-else>异常</span>
          </template>
        </template>
      </a-table>
      <a-row type="flex" justify="end">
        <a-pagination
          size="small"
          v-model:current="form.page"
          v-model:page-size="form.pageSize"
          :total="total"
          :show-total="(total) => `共 ${total} 条`"
          :show-size-changer="['10', '20', '50', '100']"
          @change="onChange"
        />
      </a-row>
    </div>
  </div>
  <manage-modal ref="editModal" v-model:showModal="showModal" @success="addPole"></manage-modal>
</template>
<style lang="less" scoped>
.container {
  background-color: #fff;
  padding: 20px 20px 0;
}
</style>
